import {useState,useEffect} from "react";
import style from "./switch.module.scss";

const Switch = (props)=>{

 const [checked,setChecked] = useState(props.defaultChecked);

//  useEffect(()=>{
//      console.log("checked",checked)
//  },[checked]);

 return (
   <button className={checked?`${style["switch-btn"]} ${style["checked"]}`:style["switch-btn"]} 
        onClick={(ev)=>{
            ev.preventDefault();
            if(props.change){
                let checkedNext = !checked;
                setChecked(checkedNext);
                props.change(checkedNext);
            };
        }}>
        <span className={style["flag"]} style={checked?{ marginReft: "auto"}:{ marginLeft : "auto"}}></span>
    </button>
 )
}

export default Switch

